<template>
  <div class="container">
    <div class="content">
      <div class="top">
        <div class="header">

          <img src="../assets/login.png" alt="PANDX MULAN"></img>
            <span class="sub">通用管理系统</span>
        </div>

        <div class="desc">
          欢迎访问 PANDX MULAN 通用管理系统
        </div>
      </div>
      <div class="main">
        <Form ref="loginForm" :rules="rules" :model="loginModel">
          <FormItem prop="userNameOrEmailAddress">
            <Input v-model="loginModel.userNameOrEmailAddress" type="text"
                   placeholder="请输入用户名或E-MAIL地址" prefix="md-person">
            </Input>
          </FormItem>
          <FormItem prop="password">
            <Input v-model="loginModel.password" type="password" password
                   placeholder="请输入密码" prefix="md-lock" @on-enter="login">
            </Input>
          </FormItem>
        </Form>
        <div>
          <Checkbox v-model="loginModel.rememberMe" size="large">保持我的登录状态</Checkbox>
          <a style="float:right;font-size: 14px;margin-top: 3px;">忘记密码</a>
        </div>
        <div style="margin-top:15px">
          <Button type="primary" @click="login" long size="large" :loading="busy">{{ loginText }}</Button>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>CopyRight @ 2022 www.pandx.com.cn</p>
      <p>QQ群：630281431</p>
    </div>
    <tenant-switch v-model="showChangeTenant"></tenant-switch>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Inject} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import iView from 'view-design';

import Footer from '@/components/footer/footer.vue';
import TenantSwitch from '@/components/tenant/tenant-switch.vue';


@Component({
  components: {Footer, TenantSwitch},
})
export default class Login extends AbpBase {

  busy:boolean=false;
  loginText:string='登录系统';
  loginModel = {
    userNameOrEmailAddress: '',
    password: '',
    rememberMe: false,
  };
  showChangeTenant: boolean = false;
  rules = {
    userNameOrEmailAddress: [
      {required: true, message: '用户名或E-MAIL地址是必须的', trigger: 'blur'},
    ],
    password: [
      {required: true, message: '密码是必须的', trigger: 'blur'},
    ],
  };

  async login() {
    (this.$refs.loginForm as any).validate(async (valid: boolean) => {
      if (valid) {
        this.busy=true;
        this.loginText='登录中，请稍候...';
          this.$store.dispatch({
            type: 'app/authenticate',
            data: this.loginModel,
          }).then(()=>{
            sessionStorage.setItem('rememberMe', this.loginModel.rememberMe ? '1' : '0');
            location.reload();
          }).catch(()=>{
            this.busy=false;
            this.loginText='登录系统';
          });

      }
    });
  }

  get tenant() {
    return this.$store.state.session.tenant;
  }


  created() {
  }
}
</script>
<style scoped lang="less">

.container {
  width: 100%;
  height: 100%;
  background-image: url('../assets/login-bg.jpg');
  background-size: cover;
  background-position: center;
  position: relative;

  .footer{
    position:absolute;;
    bottom:10px;
    width:100%;
    text-align: center;
  }
  .content {
    position: absolute;
    right: 160px;
    top: 50%;
    transform: translateY(-60%);
    width: 320px;
    background-color: #f0f0f0;
    border-radius: 10px;
    padding: 30px 30px 45px;

    .top {
      text-align: center;

      .header {

        .title {
          font-size: 34px;
          color: rgba(0, 0, 0, .85);
          font-family: "Arial","sans-serif";
          font-weight: 600;
          position: relative;
          top: 2px;
          display: block;
        }
        .sub{
          margin-top:6px;
          font-size:20px;
          font-weight:600;
          color: rgba(0, 0, 0, .65);
          position: relative;
          display: block;
        }
      }

      .desc {
        font-size: 14px;
        color: rgba(0, 0, 0, .45);
        margin-top: 20px;
        margin-bottom: 30px;
      }
    }

    .main {
      .tenant-title {
        margin-bottom: 24px;
        text-align: center;
      }
    }

    ::v-deep .ivu-input {
      height: 40px !important;
      font-size: 16px !important;
    }

    ::v-deep .ivu-input-prefix i {
      font-size: 20px !important;
      line-height: 40px !important;

    }

    ::v-deep .ivu-input-suffix i {
      font-size: 20px !important;
      line-height: 40px !important;
    }
  }
}
</style>
